<template>
  <div class="userBox">
    <el-row>
      <el-col :span="1">
        <el-button @click="addFn">
          添加用户
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="uName" label="姓名" width="100" />
      <el-table-column prop="tel" label="手机号" width="150" />
      <el-table-column prop="age" label="年龄" width="120" />
      <el-table-column prop="sex" label="性别" width="100" />
      <el-table-column prop="team" label="部门" width="100" />
      <el-table-column prop="power" label="权限" width="100" />
      <el-table-column prop="localeRegTime" label="注册时间" width="180" />
      <el-table-column prop="id" fixed="right" label="操作" width="120">
        <template #default="{row}">
          <el-button link type="primary" size="small" @click="setFn(row)">修改</el-button>
          <el-button link type="primary" size="small" @click="delFn(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <DialogForm
      :formVisible="formVisible"
      @changeVisible="changeVisibleFn"
      @submit="submitFn"
      :formData="formData"
      :type="type"
    />
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getUser, getTeam, addUser, setUser, delUser } from "../../api/index.js"
import { ArrowUp, ArrowDown, Search } from '@element-plus/icons-vue';
import DialogForm from "./DialogForm.vue";

import { useUserStore } from "../../storesPinia/user.js"
const userStore = useUserStore()

// 创建响应式表格数据
const tableData = reactive([]);

// 获取所有用户信息
getUserFn();
async function getUserFn(){
  tableData.splice(0);
  const userRes = await getUser({
    token: userStore.token
  })
  if(userRes.data.code === 1){
    // 遍历用户信息
    userRes.data.data.forEach(async val=>{
      // 根据用户信息的部门id获取部门信息
      const teamRes = await getTeam({
        token: userStore.token,
        tId: val.tId
      })
      // 获取部门名称
      val.team = teamRes.data.data[0].tName;
      // 格式化日期
      val.localeRegTime = new Date(val.regTime).toLocaleString();
      tableData.push(val);
      // 根据注册时间排序
      sort(tableData, "regTime", -1);
    })
  }
}

const formData = reactive({});

const formVisible = ref(false)
function addFn(){
  formData.id = "";
  formData.name = "";
  formData.tId = "";
  formData.power = "";
  formData.tel = "";

  formVisible.value = true;
  type.value = 0;
}
function changeVisibleFn(v){
  formVisible.value = v;
}

// 添加或修改状态
const type = ref(0);

function setFn(v){
  formData.id = v.uId;
  formData.name = v.uName;
  formData.tId = v.tId;
  formData.power = v.power;
  formData.tel = v.tel;
  
  type.value = 1;

  formVisible.value = true;
}

function submitFn(v){
  if(type.value === 0){
    // 发起后端请求，添加用户信息
    addUser({
      uName: v.name,
      tId: v.tId,
      tel: v.tel,
      power: v.power,
      token: userStore.token
    }).then(res=>{
      if(res.data.code===1){
        getUserFn();
      }else{
        console.log("添加信息用户失败")
      }
    })
  }else if(type.value === 1){
    // 发起后端请求，修改用户信息
    console.log(v);
    setUser({
      token: userStore.token,
      uId: v.id,
      tId: v.tId,
      power: v.power,
      uName: v.name
    }).then(res=>{
      if(res.data.code===1){
        getUserFn();
      }else{
        console.log("添加信息用户失败")
      }
    })
  }
}

// 删除指定用户信息
function delFn(v){
  // 发起后端请求，删除用户数据
  delUser({
    token: userStore.token,
    uId: v.uId
  }).then(res=>{
    if(res.data.code===1){
      // 获取要删除的数据的索引
      let i=0;
      tableData.some((val,idx)=>{
        i = idx;
        return val.uId === v.uId
      })
      // 从表格数据中删除要删除的数据
      tableData.splice(i, 1);
    }else{
      console.log("添加信息用户失败")
    }
  })
}


// 排序方法
function sort(arr, key, s){
  return arr.sort((a, b)=>{
    return a[key]*s + -b[key]*s;
  });
}
</script>
